import React, { Component } from 'react';
import {
	StyleSheet, Modal, View,
	Image, TouchableOpacity, Text, PixelRatio
} from "react-native";
import { GLOBAL } from '../../config/global';
import { Keyboard } from "react-native";
import { CalendarList, LocaleConfig } from 'react-native-calendars';
import { style } from '../../theme/style';
import MethodUtil from '../../utils/MethodUtil';
import moment from 'moment';

const scale = GLOBAL.SCALE;
export class RangTime extends Component {
	constructor(props) {
		super(props);
		let { isVisible, markedDates, startTime, endTime, isClear } = props;
		this.state = {
			isVisible: isVisible || false,
			markedDates: markedDates || null
		}
		this.startTime = null || startTime;
		this.endTime = null || endTime;
	}




	componentWillReceiveProps (props) {
		let { isVisible, markedDates } = props;
		this.setState({
			isVisible: isVisible || false,
			markedDates: markedDates || null
		})
	}

	componentWillMount () {
		this._init();
	}

	// 初始化
	_init = () => {
		let { startTime, endTime } = this.props;
		if (startTime && endTime) {// 俩个时间
			startTime = startTime.indexOf('-') != -1 ? startTime : moment(new Date(startTime)).format('YYYY-MM-DD');
			endTime = endTime.indexOf('-') != -1 ? endTime : moment(new Date(endTime)).format('YYYY-MM-DD');
			let resetObj = MethodUtil.timeRange(startTime, endTime);
			this.setState({
				markedDates: { ...resetObj }
			}, () => {
				this.endTime = endTime;
				this.startTime = startTime;
			})
		} else if (startTime) {  // 单个
			this.setState({
				markedDates: {
					[startTime]: { startingDay: true, textColor: style.color.white, color: style.color.timeColor, timestamp: new Date(startTime).getTime() }
				}
			}, () => {
				this.startTime = startTime;
				this.endTime = null;
			})
		}
	}

	//选择时间回调
	_changeTimeFn = (day) => {
		let { markedDates } = this.state;
		if (markedDates) { // 第二次
			let timeKey = null;
			let speed = 0;
			for (var a in markedDates) {
				timeKey = a;
				speed++;
			}
			if (speed < 2 && markedDates[timeKey].timestamp < day.timestamp) {//可以
				markedDates[day.dateString] = { endingDay: true, textColor: style.color.white, color: style.color.timeColor, timestamp: day.timestamp };
				let resetObj = MethodUtil.timeRange(timeKey, day.dateString);
				this.setState({
					markedDates: { ...resetObj }
				}, () => {
					this.endTime = day.dateString;
				})
			} else { // 重置
				this.setState({
					markedDates: {
						[day.dateString]: { startingDay: true, textColor: style.color.white, color: style.color.timeColor, timestamp: day.timestamp }
					}
				}, () => {
					this.startTime = day.dateString;
					this.endTime = null;
				})
			}
		} else {
			this.setState({
				markedDates: {
					[day.dateString]: { startingDay: true, textColor: style.color.white, color: style.color.timeColor, timestamp: day.timestamp }
				}
			}, () => {
				this.startTime = day.dateString;
				this.endTime = null;
			})
		}
	}


	//确认按钮
	_affirmFn = () => {
		let { resultCall } = this.props;
		this.setState({
			isVisible: false
		}, () => {
			resultCall && resultCall({ startTime: this.startTime, endTime: this.endTime })
		})
	}

	//取消按钮
	_cancelFn = () => {
		let { closeCall } = this.props;
		this.setState({ isVisible: false }, () => {
			closeCall && closeCall()
		})
	}

	//清除按钮
	_claerFn = () => {
		let { resultCall } = this.props;
		this.setState({
			markedDates: null
		}, () => {
			this.startTime = null;
			this.endTime = null;
			resultCall && resultCall({ startTime: this.startTime, endTime: this.endTime })
		})
	}


	render () {
		let { isVisible, markedDates } = this.state;
		let { isClear } = this.props || {};
		console.log('markedDates', markedDates)
		console.log('markedDates', this.startTime, this.endTime)
		return (
			<Modal transparent={true} visible={isVisible} onRequestClose={() => { console.log(1) }}>
				<TouchableOpacity activeOpacity={1} style={{ width: '100%', height: '100%' }} >
					<View style={styles.modalBox}>

						<View style={styles.body}>
							<View style={styles.timeHeadBox}>
								<Text style={[styles.timeClear, styles.timeBtn]} onPress={() => { this._cancelFn() }} >取消</Text>
								{!isClear ? <Text style={[styles.timeClear, styles.timeBtn]} onPress={() => { this._claerFn() }}>清空</Text> : null}
								<Text style={[styles.timeOk, styles.timeBtn]} onPress={() => { this._affirmFn() }}>确认</Text>
							</View>
							<CalendarList
								minDate={'2000-01-01'}
								maxDate={'2222-01-01'}
								monthFormat={'yyyy-MM'}
								markingType={'period'}
								onDayLongPress={(day) => { console.log(day) }}
								onDayPress={(day) => { this._changeTimeFn(day) }}
								markedDates={markedDates}
							/>
						</View>

					</View>
				</TouchableOpacity>
			</Modal>
		)
	}
}

const styles = StyleSheet.create({
	modalBox: {
		flex: 1,
		justifyContent: 'flex-end',
		//alignItems: 'flex-end',
		backgroundColor: 'rgba(0, 0, 0, 0.5)'
	},
	body: { width: '100%', height: '65%', backgroundColor: '#fff' },
	timeHeadBox: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		justifyContent: 'space-between',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale
	},
	timeBtn: {
		fontSize: 14 * scale,
		width: 80 * scale,
		textAlign: 'center',
		lineHeight: 30 * scale,
	}
})